<template>
  <!--分析报表-高低峰时间分析（区域） -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con">
        <reportheader
          :option="option"
          :Caseradio='true'
          :showDisabled="showDisabled"
          :datetimeval="datetimeval"
          :areaLimint="20"
          :tags='global.tags'
        ></reportheader>
        <div class="hei13"></div>
        <reportHeatmap :title="global.title" :HeatMapData="HeatMapData" :kpislist="kpislist" :KPIType="kpiType"
                       ref='Heatmap' @kpiTypeChange="kpiTypeChange">
        </reportHeatmap>
        <div class="hei13"></div>
        <reportWeekEcharts :id="hourDataId" :title="global.title+'周分时总客流量'" ref="hourData">
        </reportWeekEcharts>
        <div class="hei13"></div>
        <reportWeekEcharts :id="dayDataId" :title="global.title+'周每日客流量'" ref="dayData">
        </reportWeekEcharts>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    &.report-con {
      padding: 0 0;
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import reportheader from "@/components/analyzeReport/reportpublic/reportheader";
  import reportHeatmap from "@/components/analyzeReport/reportpublic/reportHeatmap";
  import reportWeekEcharts from "@/components/analyzeReport/reportpublic/reportWeekEcharts";
  import reporttable from "@/components/analyzeReport/reportpublic/reporttable";
  import reportGlobal from "@/components/global/reportGlobal";//公共配置

  export default {
    data() {
      return {
        title:'区域高低峰时间分析',           //根据title从公共配置文件中读取配置
        option: {
          shortcuts: 'weekShortcuts',
          isAreaShow: true,                 //是否显示区域，如显示需传title 默认不显示
          caseTitle: "",
          areaTitle: ""
        },
        showDisabled:{
          sum:true,
          part:true,
          reload:false,
        },
        DataV:{},//head条件接收起始时间和末尾时间
        kpislist:[],//指标数组
        kpiType:'',//当前指标值
        HeatMapData:{},//reportHeatmap组件传参
        hourDataId:'hourData',
        dayDataId:'dayData',
        hourData:{},//小时合计组件传参
        dayData:{},//日合计组件传参
        global:{},
        datetimeval:{
          day:[moment(new Date()).subtract(6,"days").format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
          hm:['00:00','23:59']
        }
      }
    },
    components: {
      page,
      reportheader,
      reportHeatmap,
      reportWeekEcharts,
      reporttable,
    },
    created() {
      for(let i in reportGlobal.queryList){
        if( this.title == reportGlobal.queryList[i].name){
          this.global = reportGlobal.queryList[i]
        }
      }
      this.option.caseTitle = this.global.caseTitle
      this.option.areaTitle = this.global.areaTitle
      this.$Bus.$emit("Loading", false);
    },
    mounted() {
      setTimeout(() => {
        window.onresize = () => {
          this.$refs.hourData.loadEchartResize("");
          this.$refs.dayData.loadEchartResize("");
        };
      }, 200);
      this.$Bus.$on("UpCondition", data => {
        if (data.area.length){
          this.DataV=data;
          this.$Bus.$emit('Loading',true);
          this.getKpis()
        } else {
          console.log("参数不足");
          this.removeData();
        }
        this.$Bus.$emit("Loading", false);
      });
      //切换企业时清空数据
      this.$Bus.$on('Remove', ()=>{
        this.$refs.Heatmap.setOption(false)
        this.$refs.dayData.setOption(false)
        this.$refs.hourData.setOption(false)
      });
    },
    beforeDestroy(){
      this.$Bus.$off("UpCondition");
      this.$Bus.$off("Remove");
      window.onresize=null;
    },
    methods:{
      //获取高低峰案场数据
      Updata(org_type=3){
        this.$Bus.$emit('Loading',true);
        let url='/sys/report_new/day_hour_sum?indicator_key='+ this.kpiType + '&start_day=' + this.DataV.start_day + '&end_day=' + this.DataV.end_day +
          '&start_hm='+ this.DataV.start_hm + '&end_hm=' + this.DataV.end_hm;
        let params={
          org_id_list:this.DataV.area,
          org_type:org_type,
        }
        this.$api.post(url,params)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据');
            this.removeData();
            return
          }
          if(data.data){
            this.getEchartsData(data.data)
          }
          else{
              this.removeData();
              this.$message.error('暂无数据');
              this.$Bus.$emit('Loading',false);
          }
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
          this.$Bus.$emit('Loading',false);
        })
      },
      //指标列表（）
      getKpis(org_type=3){
        this.$Bus.$emit('Loading',true);
        let url='/sys/report_assist_new/get_indicator_list'
        let data = {
          org_id_list : this.DataV.area,
          org_type : org_type,
        }
        this.$api.post(url,data)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据');
            this.removeData();
            return
          }
          if(data.data){
            this.kpislist = data.data.filter(x=>{
              return this.global.indicator_keys.includes(x.key)
            })
            this.kpislist.sort((x,y)=>{
              if(x.id < y.id){
                return -1
              }else{
                return 1
              }
            });
            let keysArr = this.kpislist.map(x=>{
              return x.key
            })
            //判断当前的kpiType在新的kpislist中是否存在，如果存在则不改变，否则赋值为kpislist[0]
            this.kpiType = keysArr.includes(this.kpiType) ? this.kpiType : this.kpislist[0].key
            this.Updata()
          }
          else{
            this.removeData();
             console.log(err,'企业下无指标')
            this.$Bus.$emit('Loading',false);
          }
         
        })
        .catch(err=>{
          this.removeData();
          console.log(err,'企业下无指标')
          this.$Bus.$emit('Loading',false);
        })
      },
      kpiTypeChange(val){
        this.kpiType = val
        this.$Bus.$emit('Loading',true);
        this.Updata()
      },
      //将数据格式修改为echarts组件需要的格式
      getEchartsData(data){
        let hour_item_list = data.hour_item_list
        let hour_group_list = data.hour_group_list
        let week_day_group_list = data.week_day_group_list
        let week = new Set();//星期数组
        let end_time = new Set();//时间数组
        let dataArr = [];//基础数据参数数组
        let dayTotal = [];//日合计
        let hourTotal = [];//小时合计
        let maxAndMinArr = [];
        //获取x,y轴数组
        for(let i in week_day_group_list){
          week.add(week_day_group_list[i].end_week_str)
        }
        for(let i in hour_group_list){
          end_time.add(hour_group_list[i].end_time_str)
        }
        week = [...week]
        end_time = [...end_time]

        //配置基础数据
        for(let i in hour_item_list){
          let arr = [0,0,0];
          for(let j in week){
            if(week[j] == hour_item_list[i].end_week_str){
              arr[1] = Number(j);
              for(let k in end_time){
                if(end_time[k] == hour_item_list[i].end_time_str){
                  arr[0] = Number(k)
                  arr[2] = hour_item_list[i][this.kpiType]
                  maxAndMinArr.push(hour_item_list[i][this.kpiType])
                  dataArr.push(arr)
                }
              }
            }
          }
        }
        //配置日合计数据
        for(let i in week_day_group_list){
          for(let j in week){
            if(week[j] == week_day_group_list[i].end_week_str){
              dayTotal.push(week_day_group_list[i][this.kpiType])
            }
          }
        }
        //配置小时合计数据
        for(let i in hour_group_list){
          for(let j in end_time){
            if(end_time[j] == hour_group_list[i].end_time_str){
              hourTotal.push(hour_group_list[i][this.kpiType])
            }
          }
        }
        let title = `${this.DataV.start_day} 第${moment(this.DataV.start_day).week()}周 - ${this.DataV.end_day} 第${moment(this.DataV.end_day).week()}周`
        this.HeatMapData.max =  Number.isFinite(Math.max(...maxAndMinArr)) ? Math.max(...maxAndMinArr) : 10
        this.HeatMapData.min =  Number.isFinite(Math.min(...maxAndMinArr)) ? Math.min(...maxAndMinArr) : 0
        this.HeatMapData.x_data = end_time
        this.HeatMapData.y_data = week.map(x=>{
          return x = x == 1 ? '星期一':
            x == 2 ? '星期二':
              x == 3 ? '星期三':
                x == 4 ? '星期四':
                  x == 5 ? '星期五':
                    x == 6 ? '星期六': '星期日'
        })
        this.HeatMapData.data = dataArr
        this.HeatMapData.dayTotal = dayTotal
        this.HeatMapData.hourTotal = hourTotal
        this.HeatMapData.kpiName = data.indicator.name
        this.HeatMapData.title = title
        this.$refs.Heatmap.setOption(this.HeatMapData)

        this.hourData.x_data = end_time;
        this.hourData.data = hourTotal;
        this.hourData.title = title;
        this.hourData.kpiName = data.indicator.name
        this.$refs.hourData.setOption(this.hourData)

        // console.log(week);
        // console.log(dayTotal);

        this.dayData.x_data = week.map(x=>{
          return x = x == 1 ? '星期一':
            x == 2 ? '星期二':
              x == 3 ? '星期三':
                x == 4 ? '星期四':
                  x == 5 ? '星期五':
                    x == 6 ? '星期六': '星期日'
        });
        this.dayData.data = dayTotal;
        this.dayData.title = title;
        this.dayData.kpiName = data.indicator.name
        this.$refs.dayData.setOption(this.dayData)
      },
      removeData(){
        this.$refs.Heatmap.setOption(false)
        this.$refs.dayData.setOption(false)
        this.$refs.hourData.setOption(false)
      }
    },
   
  }
</script>

<style>
</style>